<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
			<script type="text/javascript">
				
			</script>
		<style>
		
		@font-face {
		  font-family: 'iconfont';  /* project id 416894 */
		  src: url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.eot');
		  src: url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.eot?#iefix') format('embedded-opentype'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.woff') format('woff'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.ttf') format('truetype'),
		  url('http://at.alicdn.com/t/font_416894_vy1ju04z9ofxbt9.svg#iconfont') format('svg');
}
				
			body{
				margin: 0;
				padding: 0;
				background-color: #f3f3f3;
			}
			.top{
				display: flex;
				width: 100%;
				height: 50px;
				background-color: white;
				position: fixed;
				top: 0;
				box-shadow: 0px 2px 5px #888888;
			}
			.mid{
				margin-top: 60px;
				margin-left: auto;
				margin-right: auto;
				width: 75%;
			}
			
		.mid_left{
			padding: 3px;
			float: left;
			width: 65%;
		}
		
		.mid_right{
			padding: 3px;
			position: fixed;
			float: left;
			width: 24%;
			right: 13%;
		}
		
		.weibo_message{
			margin-top: 8px;
			background-color: white;
			min-height: 100px;
			box-shadow: 2px 3px 5px #888888;
		}
		
		.weibo_top{
			padding: 8px;
			padding-bottom: 5px;
			display: flex;
		}
		
		.weibo_message_img{
			width: 40px;
			height: 40px;
			background-color: black;
		}
		
		.weibo_message_nickname{
			margin-left: 8px;
			margin-top: 10px;
		}
		
		.div_message_mid{
			padding: 8px;
			padding-top: 5px;
		}
		
		.textarea_message{
			text-indent: 30px;
			padding-left: 8px;
		}
		
		.div_message_bottom{
			display: flex;
			padding: 8px;
			
		}
		
		
		.head_img{
			width: 50px;
			height: 50px;
		}
		
		.head_nickname{
			flex: 1;
			height: 50px;
		}
		
		.btn_bottom{
			text-align: center;
			font-family: "iconfont" !important;
			flex: 1
		}
		
		.right_weibo_top{
			padding: 8px;
			padding-top: 10px;
			padding-left: 12px;
			display: flex;
		}
		
		.right_weibo_message_img{
			width: 55px;
			height: 55px;
			background-color: black;
		}
		
		.right_nickname{
			padding: 8px;
			padding-left: 15px;
		}
		
		.friend_and_folloow{
			display: flex;
		}
		
		.follow{
			flex: 1;
			text-align: center;
			padding-top: 25px;
			padding: 10px;
		}
		
		.friend{
			flex: 1;
			text-align: center;
			padding-top: 25px;
			padding: 10px;
		}
		
		.right_common{
			padding: 10px;
			padding-top: 15px;
		}
		
		.right_common_in{
			padding: 3px;
			padding-top: 8px;
		}
		
		.weibo_edit{
			padding: 3px;
			background-color: white;
			box-shadow: 2px 3px 5px #888888;

		}
		
		.textarea_edit{
			padding: 3px;
			resize: none;
			width: 98%;
			height: 100px;
			
		}

		.btn_send{
			float: right;
		}
		
		.limit{
			padding: 3px;
		}
		
		.wright_number{
			padding: 3px;
			padding-left: 400px;
		}
		/*css的代码是按顺序优先执行的*/
		.logo{
			height: 40px;
			padding: 5px;
			padding-left: 200px;
		}
		
		.top_left{
			flex: 1;
		}
		
		.top_mid{
			flex: 1;
			font-family: "iconfont" !important;
			text-align: center;
			padding: 13px;
			padding-left: 15px;
		}
		
		.top_right{
			flex: 1;
		}
		
		.top_find{
			
			padding: 3px;
			
		}
		
		.top_img{
			width: 30px;
			height: 30px;
			background-color: blue;
		}
		
		.top_right{
			padding: 10px;
			padding-left: 80px;
		}
		
		.left_top{
			padding: 5px;
			background-color: white;
			box-shadow: 2px 3px 5px #888888;
		}
		
		.left_bottom{
			margin-top: 8px;
			padding: 5px;
			background-color: white;
			box-shadow: 2px 3px 5px #888888;
		}
		.edit_bottom{
			text-align: right;
		}
		.edit_bottom_word_count{
			margin-right: 8px;
		}
		.send_btn{
			padding: 4px 8px 4px 8px;
			color: #fff;
			background: #00aaff;
			border: none;
			border-radius: 4px;
		}
		.search_btn{
			font-size: 20px;
			padding: 4px 8px 4px 8px;
			color: #000;
		}
		/*css鼠标悬停改变样式*/
		.search_btn:hover{
			color: #00aaff;
		}

		.transmit{
			padding: 3px;
			background-color:#f3f3f3;
			margin-left: 40px;
			margin-right: 40px;
		}
		
		.transmit_name{
			padding: 3px;
		}
		
		.head_nickname_size{
			font-size: 18px;
			font-weight: bold;
		
		}
		.time_size{
			color: rgb(180,187,205);
		}
		</style>
	</head>
	<body>	
	
	<div class="top" >
		<div class="top_left">
			<img class="logo" src="img/logo.png" />
		</div>
		<div class="top_mid">
			<input class="top_find" type="text" />
			<span class="search_btn">&#xe6a7;</span>
		</div>
		<div class="top_right">
			<img class="top_img" src="img/back.png" />
		</div>
	</div>
	
	
	<div class ="mid">
		
		<!--内容的左边-->	
		<div class="mid_left">
			
			<!--微博内容编辑-->
			<div class="weibo_edit">
				<div class="edit_top">
					<textarea class="textarea_edit" value="请编辑的的微博！">请编辑的的微博！</textarea>
				</div>
				
				<div class="edit_bottom">
					<div class="edit_bottom_right">
						<!-- <div class="edit_bottom_word_count"> -->
							
						<!-- </div> -->
						<span class="edit_bottom_word_count">
							<span id="word_counter">0</span> / 140
						</span>
						<!-- <input class="btn_send" type="button" value="发 送" /> -->
						<button class="send_btn">发送</button>

					</div>
					
					
				</div>
			</div>
			
			<!--<div class="weibo_message">
			    <!--<div class="weibo_top">
			        <div class="head_img">
			            <img class="weibo_message_img" src = "'+head_img+'"/>
			        </div><div class="head_nickname">
			        <div>'+thisData.nickname+'</div>
			        <div>'+formatDateTime(thisData.time)+'</div>
			        </div>
			    </div>-->
			    <!--<div class="div_message_mid">
			        <div class="textarea_message" >'+thisData.content+'</div>
			    </div>
			   <!-- <div class="transmit"><div class="transmit_name">@转发自某某某</div><div class="transmit_name">阿拉啦啦啦啦啦啦啦啦阿拉啦</div></div>
<!--<!--<!---->	
				<!--<div class="div_message_bottom">
			        <div class="btn_bottom">&#xe617; 转&nbsp;发</div>
			        <div class="btn_bottom">&#xe62f; 评  论</div>
			        <div class="btn_bottom">&#xe604; '+thisData.like_num+'</div>
			    </div>
			</div>-->
			
			<div id="weibo_area">

			</div>					
		</div>
								
		<!--微博的右部分-->
		<div class="mid_right">
			
			<div id="right_top"></div>
					
			<div id="right_bottom"></div>
	
		</div>
	</div>
	<script>
		function formatDateTime(inputTime) {    
			var timeInt = parseInt(inputTime);
		    var date = new Date(timeInt);  
		    var y = date.getFullYear();    
		    var m = date.getMonth() + 1;    
		    m = m < 10 ? ('0' + m) : m;    
		    var d = date.getDate();    
		    d = d < 10 ? ('0' + d) : d;    
		    var h = date.getHours();  
		    h = h < 10 ? ('0' + h) : h;  
		    var minute = date.getMinutes();  
		    var second = date.getSeconds();  
		    minute = minute < 10 ? ('0' + minute) : minute;    
		    second = second < 10 ? ('0' + second) : second;   
		    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;    
		}
		var weiboList = [];
		var page = 1;
		
		$(document).ready(function(){
			$.get('userinfo.do',function(data){
				console.log(data);
				var jsonObj = JSON.parse(data);
				var data = jsonObj.data;
				var userinfo = data;
				
				
					var thisData = data;
				
				var head_img = 'img/head/' + thisData.head_image + ".jpg";
				var userinfoHtml = '<div class="left_top"><div class="right_weibo_top"><div class="head_img"><img class="right_weibo_message_img" src = "'+head_img+'"/></div><div class="head_nickname"><div class="right_nickname">'+thisData.nickname+'</div></div></div><div class="friend_and_folloow"><div class="follow"><div>'+thisData.follow_num+'</div><div>关  注 </div></div><div class="friend"><div>'+thisData.fans_num+'</div><div>粉  丝</div></div></div></div>'
				$("#right_top").html(userinfoHtml);
				
				var userinfobottomHtml = '<div class="left_bottom"><div class="right_common"><div class="right_common_in">地  区：<span class="area_common">'+thisData.area+'</span></div></div><div class="right_common"><div class="right_common_in">性 别：<span class="area_name">'+thisData.sex+'</span></div></div><div class="right_common"><div class="right_common_in">生 日：<span class="area_name">'+thisData.birthday+'</span></div></div><div class="right_common"><div class="right_common_in">个性签名：<span class="area_name">'+thisData.signature+'</span></div></div></div>'
				$("#right_bottom").html(userinfobottomHtml);
			})
		})
		
		
		
		
		$(document).ready(function(){
			$.get('listBlog.do', function(data){
				console.log(data);
				var jsonObj = JSON.parse(data);
				var data = jsonObj.data;
				weiboList = data;

				var weiboListHtml = "";
				for (var i = 0; i < data.length; i++) {
					var thisData = data[i];
					var head_img = 'img/head/' + thisData.head_image + ".jpg";
					var weiboHtml = '<div class="weibo_message"><div class="weibo_top"><div class="head_img"><img class="weibo_message_img" src = "'+head_img+'"/></div><div class="head_nickname"><div class = "head_nickname_size">'+thisData.nickname+'</div><div class = "time_size">'+formatDateTime(thisData.time)+'</div></div></div><div class="div_message_mid"><div class="textarea_message" >'+thisData.content+'</div></div>';
					if(thisData.reblog_user_id != "")
					{
						weiboHtml += '<div class="transmit"><div class="transmit_name">@'+thisData.reblog_nickname+'</div><div class="transmit_name">'+thisData.reblog_content+'</div></div>';
					}
						weiboHtml += '<div class="div_message_bottom"><div class="btn_bottom">&#xe617; 转&nbsp;发</div><div class="btn_bottom">&#xe62f; 评  论</div><div class="btn_bottom">&#xe604; '+thisData.like_num+'</div></div></div>';

					weiboListHtml += weiboHtml;
				}
				$("#weibo_area").html(weiboListHtml);
			})
		})

	</script>
	</body>
</html>
